<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式控制</title>
    <link rel="stylesheet" href="/static/css/my-demo.css">
    <style>

        .my-p1 {
            color: red;
            font-size: 20px;
            /*设置字高*/
            line-height: 50px;
        }

        .my-p2 {
            height: 200px;
            width: 200px;
            overflow-wrap: break-word;
            border: solid 1px #0C0C0C;
            overflow: auto;
        }

        .my-p3 {
            height: 20px;
            width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            border: solid 1px #0C0C0C;
        }

        .my-p4 {
            width: 300px;
            vertical-align: middle;
        }

        .info-item > ul li {
            list-style: none;
        }

        .info-item label {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
            /*
            说明:
                1. text-align-last 属性规定如何对齐文本的最后一行。
                    - 注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
            */
            text-align: justify;
            text-align-last: justify;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 控制文字的基本样式</h1>
    <h2>1.1 控制文字大小和颜色</h2>
    <div>
        <p>正常的p, 什么都没有设置</p>
        <p class="my-p1">我被设置了文字大小和颜色</p>
    </div>
    <h2>1.2 设置文本内容溢出</h2>
    <p class="my-p2">
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
    </p>
    <h2>1.3 使超出文本隐藏, 并显示...</h2>
    <p class="my-p3">
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyz
    </p>
    <h2>1.4 文本对齐</h2>
    <p class="my-p4">我是比较长的长短A</p>
    <p class="my-p4">我是中段</p>
    <p class="my-p4">短段</p>
    <h2>1.5 label内容分散对齐</h2>
    <div>
        <ul class="info">
            <li class="info-item">
                <label for="user">用户名</label>
                <input type="text" id="user"/>
            </li>
            <li class="info-item">
                <label for="psw">密码</label>
                <input type="password" id="psw"/>
            </li>
            <li class="info-item">
                <label for="email">电子邮箱</label>
                <input type="text" id="email"/>
            </li>
        </ul>
    </div>
</div>
</body>
</html>